var $az = {
	object:function(item){
		
	},
	tagElement:function( tag , attrs , childs ){
		var element = document.createElement(tag);
		var attr ;
		for( var index in attrs ){
			attr = attrs[index];
			element.setAttribute( attr.name , attr.value );
		}
		var child ;
		for( var index in childs ){
			child = childs[index];
			if( child != undefined ){
				element.appendChild(child);
			}
		}
		return element ;
	},
	controls:{
		textbox:function( id , name , value , width , height ){
			var _textbox = $az.tagElement( "input" , [{name:"type",value:"text"},{name:"id",value:id},{name:"name",value:name},{name:"value",value:value},{name:"style",value:"border: 1px solid #CCC; padding: 2px ; border-radius: 2px; font-size: 14px; width: " + ( width == undefined || parseInt( width ) <= 150 ? 150 : parseInt( width ) ) + "px ; height: " + ( height == undefined || parseInt( height ) <= 30 ? 30 : parseInt( height ) ) + "px ;"}]);
			_textbox.addClass = function(_class){
				if(_textbox.getAttr("class")!=null){
					var elements = _textbox.getAttr("class").split(" ") ;
					var index = elements.indexOf(_class);
					if(index==-1){
						elements.push(_class);
						_textbox.setAttr("class",elements.join(" ").trim());
						return true ;
					}
				}
				else{
					_textbox.setAttr("class",_class);
					return true ;
				}
				return false ;
			};
			_textbox.removeClass = function(_class){
				if(_textbox.getAttr("class")!=null){
					var elements = _textbox.getAttr("class").split(" ") ;
					var index = elements.indexOf(_class);
					if (index!=-1){
						delete elements[index];
						_textbox.setAttr( "class" , elements.join( " " ).trim() );
						return true ;
					}
				}
				return false;
			};
			_textbox.getAttr = function( name ){ return _textbox.getAttribute(name) ;};
			_textbox.setAttr = function( name , value ){ _textbox.setAttribute(name, value);};
			_textbox.click = function(callback){ _textbox.onclick = function(){callback();};};
			_textbox.over = function(callback){ _textbox.onmouseover = function(){callback();};};
			_textbox.out = function(callback){ _textbox.onmouseout = function(){callback();};};
			return _textbox;
		},
		button:function ( id , name , value , _class ){
			var _button = $az.tagElement( "input" , [{name:"type",value:"button"},{name:"id",value:id},{name:"name",value:name},{name:"class",value:_class},{name:"value",value:value},{name:"style",value:"border: 1px solid #CCC; padding: 2px ; border-radius: 2px; font-size: 14px; width: 150px ; height: 25px ;"}]);
			_button.addClass = function(_class){
				if(_button.getAttr("class")!=null){
					var elements = _button.getAttr("class").split(" ") ;
					var index = elements.indexOf(_class);
					if(index==-1){
						elements.push(_class);
						_button.setAttr("class",elements.join(" ").trim());
						return true ;
					}
				}
				else{
					_button.setAttr("class",_class);
					return true ;
				}
				return false ;
			};
			_button.removeClass = function(_class){
				if(_button.getAttr("class")!=null){
					var elements = _button.getAttr("class").split(" ") ;
					var index = elements.indexOf(_class);
					if (index!=-1){
						delete elements[index];
						_button.setAttr( "class" , elements.join( " " ).trim() );
						return true ;
					}
				}
				return false;
			};
			_button.getAttr = function( name ){ return _button.getAttribute(name) ;};
			_button.setAttr = function( name , value ){ _button.setAttribute(name, value);};
			_button.click = function(callback){ _button.onclick = function(){callback();};};
			_button.over = function(callback){ _button.onmouseover = function(){callback();};};
			_button.out = function(callback){ _button.onmouseout = function(){callback();};};
			return _button;
		},
		combo:function(items, selectedIndex , selectedValue , autoCompleted ){
			var _items= items ;
			var _selectedIndex= selectedIndex == undefined ? -1 : selectedIndex ;
			var _selectedValue= selectedValue == undefined ? "" : selectedValue ;
			var _autoCompleted= autoCompleted == undefined ? false : autoCompleted ;
			var _focusBox = false ;
			var _listShow = false ;
			var _timeout = 0 ;
			this.selectedIndex=function(){return _selectedIndex;};
			this.selectedValue=function(){return _selectedValue;};
			this.setAutoCompleted=function(autoCompleted){_autoCompleted=autoCompleted;};
			this.getAutoCompleted=function(){return _autoCompleted;};
			var _combo = $az.tagElement( "div" , [{name:"class",value:"combo"},{name:"style",value:"position: relative; display: block; float: left; width: 200px; "}] );
			var _combo_box = $az.tagElement( "input" , [{name:"type",value:"text"},{name:"class",value:"combo_box"},{name:"style",value:"position: relative; display: block; float: left; width: 100%; margin: 0px ; cursor: pointer; padding: 2px; border: 1px solid #CCC; background: #FFF url(\"fsi/img/arrow_down.jpg\") no-repeat right  ; "}]);
			var _combo_list = $az.tagElement( "div" , [{name:"class",value:"combo_list"},{name:"style",value:"display: none; border: 1px solid #CCC; border-top: none; height: auto; overflow: auto;"}]);
			_combo.onmouseover=function(){
				_combo_box.style.border = "1px solid red" ;
			};
			_combo.onmouseout=function(){
				_combo_box.style.border = "1px solid #CCC" ;
			};
			//_combo_box.onkeydown=function(e){
			_combo_box.onkeyup=function(e){
				//alert( e.keyCode );
				var search = _combo_box.value.toLowerCase();
				var filterItems = new Array();
				if ( _autoCompleted ){
					_items.sort();
					var helper = false ;
					for( var index in _items ){
						if ( search == _items[index].name.substr( 0 , search.length ).toLowerCase() ){
							helper = true ;
							filterItems.push( _items[index] );
						}
					}
					_loadList(helper?filterItems:_items);
				}
			};
			_combo_box.onblur=function(){
				this.style.border = "1px solid #CCC" ;
				_focusBox = false ;
				_showList();
			};
			_combo_box.onfocus=function(){
				_combo_list.style.display = "block" ;
				_focusBox = true ;
				_showList();
			};
			_showList = function(){
				if ( _focusBox && !_listShow ){
					_listShow=true;
					_combo_list.style.display = "block";
				}
				else if( !_focusBox && _listShow ) {
					clearTimeout(_timeout);
					_focusBox=false;
					_listShow=false;
					_timeout = setTimeout("_showList()",300);
				}
				else if( !_focusBox && !_listShow ){
					_combo_list.style.display = "none";
				}
			};
			_loadList = function(items){
				_combo_list.innerHTML = "" ;
				_combo_list.style.height = items.length > 10 ? "200px" : "auto" ;
				for( var index in items ){
					var _combo_item = $az.tagElement( "div" , [{name:"class",value:"combo_item"},{name:"value",value:index},{name:"style",value:"padding: 2px;cursor: pointer;"}] );
					_combo_item.innerHTML = items[index].name ;
					_combo_item.onclick=function(){
						_selectedIndex = this.getAttribute("value");
						_selectedValue = this.innerHTML;
						_combo_box.value = items[_selectedIndex].value ;
						_focusBox=false;
						_listShow=false;
						_showList();
					};
					_combo_item.onmousedown=function(){
						this.style.background = "#CCC";
					};
					_combo_item.onmouseup=function(){
						this.style.background = "#EEE";
					};
					_combo_item.onmouseover=function(){
						this.style.background = "#EEE" ;
					};
					_combo_item.onmouseout=function(){
						this.style.background = "inherit" ;
					};
					_combo_list.appendChild( _combo_item );
					_combo_item = null ;
				}
			};
			_loadList(_items);
			_combo.appendChild( _combo_box );
			_combo.appendChild( _combo_list );
			return _combo ;
		},// end Combo
		message:{
			// NO:1, YES:2, OK:0,
			OK_ONLY:0,
			YES_NO:1,
			NONE:0,
			INFORMATION:1,
			QUESTION:2,
			EXCLAMATION:4,
			CRITICAL:8,
			show:function( message , title , icon , button , callback ){	
				
				var icons = {NONE:"",INFORMATION:"infor.jpg",QUESTION:"quest.jpg",EXCLAMATION:"excla.jpg",CRITICAL:"error.jpg"};
				var activeIcon = "" ;
				switch ( icon ){
					case this.NONE:
						activeIcon = icons.NONE;
						break;
					case this.INFORMATION:
						activeIcon = icons.INFORMATION;
						break;
					case this.QUESTION:
						activeIcon = icons.QUESTION;
						break;
					case this.EXCLAMATION:
						activeIcon = icons.EXCLAMATION;
						break;
					case this.CRITICAL:
						activeIcon = icons.CRITICAL;
						break;
				}
				
				var bodyObject = document.getElementsByTagName("body")[0] ;
				
				var _messageBlocker = $az.tagElement( "div" ,[{name:"style",value:"position: absolute ; display: block; float: left; top: 0px; left: 0px; margin: 0px; padding: 0px;width: 100%;height: 100%;z-index: 9998;background: #AAA ; opacity: 0.5 ; filter:alpha(opacity=50); /* For IE8 and earlier */"}] ); 
				
				var _messageObject = $az.tagElement( "div" ,[{name:"style",value:"position: relative ; display: block; float: none; margin: 100px auto auto; padding: 0px; border: 1px solid #CCC ; border-radius: 2px; width: 60%; height: 205px ; background: #FFF; z-index: 9999; box-shadow: 0px 2px 3px #666;"}] );
				
				var _messageTitleBar = $az.tagElement( "div" ,[{name:"style",value:"position: relative ; display: block; float: left; width: 98%; padding: 1%; background: #CCC ; border-bottom: #AAA; cursor: move ;"}] );
				
				var _messageCloser = $az.tagElement("input" , [{name:"type",value:"button"},{name:"id",value:"btnCloseMessage"},{name:"name",value:"btnCloseMessage"},{name:"value",value:"X"},{name:"style",value:"border: 1px solid #666; border-radius: 2px; display: block; float: right; line-height: 20px; position: relative; text-align: center; width: 20px; cursor: pointer ;"}] );
				
				_messageCloser.onclick = function (){_messageObject.parentNode.removeChild( _messageObject );_messageBlocker.parentNode.removeChild( _messageBlocker );callback(-1);};
				
				_messageTitleBar.innerHTML = title ;
				_messageTitleBar.appendChild( _messageCloser );
				_messageObject.appendChild( _messageTitleBar );
				
				var _messageIcon = $az.tagElement( "span" ,[{name:"style",value:"position: relative; display: block; float: left; width: 15%; height: 50%; top: 0px; left: 0px; background: url(\"fsi/img/"+activeIcon+"\") no-repeat center center transparent ;"}] );
				_messageObject.appendChild( _messageIcon );
				
				var _messageInfo = $az.tagElement( "span" ,[{name:"style",value:"position: relative; display: block; float: left; width: 83%; height: 55%; top: 0px; left: 0px; padding: 1%; "}] );
				_messageInfo.innerHTML = message ;
				_messageObject.appendChild( _messageInfo );
				
				var _messageButtonBar = $az.tagElement( "span" ,[{name:"style",value:"position: relative; display: block; float: left; width: 100%; top: 0%; height: 40px ;left: 0%; padding: 0%; "}] );
				var _centerElement = $az.tagElement("center");
				_messageButtonBar.appendChild( _centerElement );
				_messageObject.appendChild( _messageButtonBar );
				
				switch ( button ){
					case this.YES_NO:
						var _btnNo = $az.tagElement( "input",[{name:"type",value:"button"},{name:"id",value:"_btnNo"},{name:"name",value:"_btnNo"},{name:"value",value:"NO"},{name:"style",value:"width: 100px; height: 30px; margin: 0.5% ; width: 15%; height: 80% ; border: 1px solid #CCC; "}] );
						_btnNo.onclick = function ( ){_messageObject.parentNode.removeChild( _messageObject );_messageBlocker.parentNode.removeChild( _messageBlocker );callback(1);};
						_btnNo.onmouseover = function(){_btnNo.style.border = "1px solid #999" ;};
						_btnNo.onmouseout = function(){_btnNo.style.border = "1px solid #CCC" ;};
						_btnNo.onmousedown = function(){_btnNo.style.border = "1px solid #666" ;};
						_centerElement.appendChild( _btnNo );
						var _btnYes = $az.tagElement( "input", [{name:"type",value:"button"},{name:"id",value:"_btnYes"},{name:"name",value:"_btnYes"},{name:"value",value:"YES"},{name:"style",value:"width: 100px; height: 30px; margin: 0.5% ; width: 15%; height: 80% ; border: 1px solid #CCC; "}] );
						_btnYes.onclick = function ( ){_messageObject.parentNode.removeChild( _messageObject );_messageBlocker.parentNode.removeChild( _messageBlocker );callback(2);};
						_btnYes.onmouseover = function(){_btnYes.style.border = "1px solid #999" ;};
						_btnYes.onmouseout = function(){_btnYes.style.border = "1px solid #CCC" ;};
						_btnYes.onmousedown = function(){_btnYes.style.border = "1px solid #666" ;};
						_centerElement.appendChild( _btnYes );
						break;
					case this.OK_ONLY:
						var _btnOk = $az.tagElement( "input",[{name:"type",value:"button"},{name:"id",value:"_btnOk"},{name:"name",value:"_btnOk"},{name:"value",value:"OK"},{name:"style",value:"width: 100px ; height: 30px; margin: 0.5% ; width: 15%; height: 80% ; border: 1px solid #CCC;"}] ); 
						_btnOk.onclick = function ( ){_messageObject.parentNode.removeChild( _messageObject );_messageBlocker.parentNode.removeChild( _messageBlocker );callback(0);};
						_btnOk.onmouseover = function(){_btnOk.style.border = "1px solid #999" ;};
						_btnOk.onmouseout = function(){_btnOk.style.border = "1px solid #CCC" ;};
						_btnOk.onmousedown = function(){_btnOk.style.border = "1px solid #666" ;};
						_centerElement.appendChild( _btnOk );
						break;
				}
				
				{
					bodyObject.setAttribute( "style" , "border: 0px; margin: 0px; padding: 0px;");
					bodyObject.appendChild( _messageBlocker );
					bodyObject.appendChild( _messageObject );
				};
			}
		} // end message
	}
};